<template>
    <el-container class="layout">
        <el-row class="sideBtn">
            <SideBtn/>
        </el-row>
        <PageHeader/>
        <el-container class="layinner">
            <el-aside width="180px">
                <PageMenu/>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        <el-footer>
            <PageFooter/>
        </el-footer>
    </el-container>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import PageHeader from '@component/common/PageHeader.vue';
  import PageFooter from '@component/common/PageFooter.vue';
  import PageMenu from '@component/trade/menu.vue';
  import { mapGetters, mapState, mapActions } from 'vuex';
  import { Mutation, namespace } from 'vuex-class';
  import SideBtn from '@/component/common/SideBtn.vue'
 
  var messageStore = namespace('message')

  @Component({
    components: {
        PageHeader,
        PageFooter,
        PageMenu,
        SideBtn
    },
      // computed: {
      //     ...mapState([
      //         'messageNumber',
      //         'allTips'
      //     ])
      // },
      // methods: {
      //     ...mapActions([
      //         'getAllTips'
      //     ])
      // }
  })
    export default class Trade extends Vue {
      // @messageStore.Action('getMessageNumber') getMessageNumber!:Function;
      // @Mutation setMessageNumber;
      mounted () {
          // this.getMessageNumber();
          // this.getAllTips();
      }
    }
</script>

<style lang="scss" scoped>
    .sideBtn{
        position: fixed;
        top: 50%;
        margin-top: -125px;
        right: 0px;
        z-index: 1000;
    }
</style>

<style lang="scss">
    
    // .tab-compnent {
    //     padding: 2em;
    //     margin-right: 60px;
    // }

    // .el-header,.el-footer,.el-main{
    //     padding: 0;
    //     overflow: hidden !important;
    // }
    // .el-header{
    //     height: 96px !important;
    // }
    // .layout{
    //     min-height: 100%;
    // }
    // .el-footer{
        //     height: 224px !important;
    // }
    .layout{
        min-height: 100%;
        .layinner{
            padding-top: 96px;
            min-height: -webkit-calc(100% - 320px);
            min-height: -moz-calc(100% - 320px);
            min-height: -ms-calc(100% - 320px);
            min-height: calc(100% - 320px);
            .el-aside{
                // width: 180px;
                float: left;
                overflow: hidden;
            }
            .el-main{
                flex-basis: -webkit-min-content;
                flex-basis: -moz-min-content;
                flex-basis: min-content;
            }
        }
    }
    //列表的头部
    .content{
        padding: 2em;
        margin-right: 60px;
        // overflow-x: hidden;
        .filter_btn{
            padding-bottom: 8px;
            border-bottom: 1px solid $__color-line;
            .title{
                width: 90px;
                height: 32px;
                line-height: 32px;
                font-size: 18px;
                margin-right: 12px;
            }
            .el-radio-button{
                .el-radio-button__inner{
                    font-size: 14px;
                    height: 32px;
                    padding-top: 8px;
                    padding-bottom: 8px;
                }
            }
            .delete{
                float: right;
                text-align: right;
                .el-button{
                    border-radius: 4px;
                    font-size: 14px;
                }
            }
        }
        .el-menu.el-menu--horizontal {
            border-bottom: 1px solid $__color-primary;
            padding-left: 20px;
        }
        .el-menu--horizontal > .el-menu-item{
            height: 50px !important;
            line-height: 50px !important;
            font-size: 16px;
            padding: 0;
            &:nth-child(2){
                margin-left: 100px;
            }
        }
        .el-menu--horizontal > .el-menu-item.is-active{
            color: $__color-primary !important;
            border-bottom: 3px solid $__color-primary !important;
        }
        .el-button--small{
            font-size: 14px;
            padding-top: 8px;
            padding-bottom: 8px;
            height: 32px !important
        }
    }
    //弹框中的居中图标
    .rem-dialog-con{
        .warning, .hpx-success{
            // height: 30px;
            margin-bottom: 12px;
            .iconfont{
                font-size: 30px;
            }
        }
    }
    //弹框中居左的label
    .rem-dialog-con.text_left{
        text-align: left !important;
        //居中的文字
        .text_center{
            text-align: center;
            font-size: 16px;
            line-height: 40px;
        }
    }
    //票据详情or订单详情
    //顶部的标题栏
    .title_block{
        font-size: 16px;
        color: $__color-show;
        .title_text{
            margin-left: 10px;
        }
        .col{
            margin-left: 50px;
        }
        .top_btn{
            float: right;
            margin-right: 40px;
        }
    }
    //详情页面主要信息
    .detail_mian{
        margin-top: 21px;
        .mian_block{
            border: 1px dashed $__color-border;
            border-radius: 2px;
            .detail_info{
                padding: 30px 0;
                .imgs{
                    height: 180px;
                    // .el-col, img{
                    //     height: 146px;
                    // }
                    // img{
                    //     width: 100%;
                    // }
                    .image_zoom{
                        width: 100%;
                        border: 1px solid $__color-border;
                    }
                    .tag{
                        text-align: center;
                        line-height: 34px;
                        font-size: 14px;
                        color: $__color-label;
                    }
                }
            }
        }
        //订单状态
        .text_center{
            text-align: center;
            font-size: 16px;
            line-height: 40px;
        }
    }
    .el-table__row--striped{
        background-color: $__color-bg-primary !important;
    }
    
    .el-radio-button--small .el-radio-button__inner{
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 14px !important;
    }
    .el-input__suffix{
        right: 12px !important;
    }
    @media screen and (max-width: 1350px){
        .content{
            padding: 1rem;
            .filter_btn{
                .title{
                    width: 80px;
                    margin-right: 0;
                }
            }
        }
    }
    @media screen and (max-width: 1300px){
        .content{
            .filter_btn{
                .title{
                    width: 80px;
                    margin-right: 0;
                }
            }
        }
        .title_block{
            .col{
                margin-left: 40px;
            }
        }
        .enterprise_info .col{
            margin-left: 40px;
        }
    }
    .bid_tips {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>